<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>左移与右移</title>
    <style>
        a:link,a:visited{color:black;text-decoration: none;}
         a:hover{color: #fd4913;}
       .in{text-align: center;}
       select{width:100px;height:150px}
       input[type=button]{width:50px}
       #opt{margin:90px 10px 0}
       .box{width:80%;margin:0 auto;background-color:#999999}
       .box div{float:left}
     </style>
   </head>
   <body>
       <h2>左移与右移</h2>
     <div class="box">
       <div id="left"><p>可选项</p><select multiple="multiple">
           <option>添加</option><option>移动</option>
           <option>修改</option><option>查询</option>
           <option>打印</option><option>删除</option>
         </select></div>
       <div id="opt">
         <input id="toRight" type="button" value=">"><br>
         <input id="toLeft" type="button" value="<"><br>
         <input id="toAllRight" type="button" value=">>"><br>
         <input id="toAllLeft" type="button" value="<<"><br>
       </div>
       <div id="right">
           <p>已选项</p>
         <select multiple="multiple"></select></div>
     </div>
     <script src="jquery-1.12.4.min.js"></script>
     <script>
       // 获取按钮添加单击事件，获取第一个下拉框中被选中的option添加到第二个下拉框
       $('#toRight').click(function() {       // 右移
         $('#right>select').append($('#left>select>option:selected'));
       });
       $('#toLeft').click(function() {        // 左移
         $('#left>select').append($('#right>select>option:selected'));
       });
       $('#toAllRight').click(function() {    // 全部右移
         $('#right>select').append($('#left>select>option'));
       });
       $('#toAllLeft').click(function() {     // 全部左移
         $('#left>select').append($('#right>select>option'));
       });
     </script>
     <div class="in">
     <p><a href="default.html">返回目录</a></p>
     <p><a href="第十一章.html">返回十一章</a></p>
     <p><a href="手风琴效果.html">下一题</a></p></div>
   </body>
 </html>

